<template>
  <div class="ol-popup wmsDetailsPopup" ref="overlayRef">
    <div class="ol-popup-closer" @click="handleClickCloser"></div>
    <div class="popupContent">
      <h3 class="title">
        <div class="name">
          <p>{{ state.name }}</p>
          <span class="trapezoid" style="background: #3defff; right: -6px"></span>
          <span class="trapezoid" style="background: #80EFFF; right: -11px"></span>
          <span class="trapezoid" style="background: #6BFFFF; right: -16px"></span>
          <span class="trapezoid" style="background: #9CFFFF; right: -21px"></span>
        </div>
      </h3>
      <ul class="list">
        <!-- <template v-for="(item, key, index) in state.listData" :key="index">
          <li class="listItem" v-if="item">
            <h3>{{key}}</h3>
            <p>{{item}}</p>
          </li>
        </template> -->
        <li class="listItem">
          <h3>田块名称</h3>
          <p>{{ state.listData?.tiankuai1 || '' }}</p>
        </li>
        <li class="listItem">
          <h3>种植大户名称</h3>
          <p>{{ state.listData?.dahuname || '' }}</p>
        </li>
        <li class="listItem">
          <h3>种植作物</h3>
          <p>{{ state.listData?.type || '' }}</p>
        </li>
        <li class="listItem">
          <h3>所属街道</h3>
          <p>{{ state.listData?.xiangzheng || '' }}</p>
        </li>
        <li class="listItem">
          <h3>所属社区/村</h3>
          <p>{{ state.listData?.cun || '' }}</p>
        </li>
        <li class="listItem">
          <h3>所属圩区</h3>
          <p>{{ state.listData?.weiqu || '' }}</p>
        </li>
        <li class="listItem">
          <h3>田块面积</h3>
          <p>{{ state.listData?.AREA || '' }}</p>
        </li>
        <li class="listItem">
          <h3>关联泵站</h3>
          <p>{{ state.listData?.guangai || '' }}</p>
        </li>
      </ul>
      <div class="more" @click="handleClickMore">
        <a-button>查看更多</a-button>
      </div>
    </div>
    <DetailsModal @register="registerModal"/>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch, nextTick, onMounted } from 'vue';
  import { getGlobalMap } from '@/components/GlobalMap';
  import Overlay from 'ol/Overlay';
  import * as turf from '@turf/turf';
  import DetailsModal from './DetailsModal';
  import { useModal } from "@gui-pkg/antdcomponents";

  defineOptions({ name: 'WmsDetailsPopup' });

  const overlayRef = ref<HTMLDivElement | null>(null);
  const [registerModal, { openModal }] = useModal();
  const state = reactive({
    overlay: null,
    name: '数据详情',
    listData: null,
  });

  const props = defineProps({
    stationData: { type: Array },
  });

  watch(
    () => props.stationData,
    (val) => {
      if (val?.length > 0) {
        clear();
        setOverlayPopupContent(val);
      }
    },
    { deep: true }
  );

  function clear() {
    clearInterval(state.intervalId); //清除计时器
    state.intervalId = null; //设置为null
  }

  function setOverlayPopupContent(pickFeaturesData) {
    let pointOnPolygon = null;
    if (pickFeaturesData[0].geometry.type === 'MultiPolygon') {
      let polygon = turf.polygon(pickFeaturesData[0].geometry.coordinates[0]);
      pointOnPolygon = turf.pointOnFeature(polygon);
    }

    // 设置 Overlay的坐标位置
    if (pointOnPolygon) {
      let coordinates = pointOnPolygon.geometry.coordinates;
      console.log(pickFeaturesData[0].properties, 'pickFeaturesData[0].properties');
      state.listData = pickFeaturesData[0].properties;
      state.overlay.setPosition(coordinates);
    }
  }

  const initOverlay = () => {
    const olMap = getGlobalMap();
    const overlay = new Overlay({
      id: 'OverlayPopup',
      element: overlayRef.value,
      autoPan: false,
    });
    state.overlay = overlay;
    olMap.addOverlay(overlay);
  }

  function handleClickCloser() {
    state.overlay.setPosition(undefined);
    overlayRef.value.blur();
  }

  // 查看更多
  const handleClickMore = () => {
    openModal(true, { record: 'sssssss' });
  }

  onMounted(async () => {
    await nextTick();
    initOverlay();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .wmsDetailsPopup {
    @keyframes turn {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    bottom: 17px;
    left: -48px;
    border: none;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px rgba(29, 159, 107, 0.3);
    padding: 0;

    .ol-popup-closer {
      width: 18px;
      height: 18px;
      top: 8px;
      right: 6px;
    }

    .ol-popup-closer:after {
      font-size: 18px;
      color: #43a3f0;
    }

    .popupContent {
      width: 100%;
      height: 100%;
      h3.title {
        display: flex;
        align-items: center;
        min-width: 280px;
        margin-bottom: 6px;
        border-radius: 6px 0 0 0;
        overflow: hidden;
        .name {
          min-width: 60%;
          height: 36px;
          position: relative;
          margin-right: 26px;
          &::before {
            content: '';
            width: 100%;
            height: 100%;
            background: linear-gradient(105deg, rgb(11 174 250) 0%, rgb(68 237 255) 100%);
            clip-path: polygon(0% 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);
            position: absolute;
          }
          p {
            height: 100%;
            padding: 0 20px 0 10px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            color: #fff;
            position: relative;
            z-index: 10;
            font-size: 16px;
          }

          .trapezoid {
            position: absolute;
            top: 0;
            right: -6px;
            width: 18px;
            height: 100%;
            background: #43a3f0;
            clip-path: polygon(84% 0%, 100% 0%, 18% 100%, 0% 100%);
          }
        }
      }
      ul.list {
        display: flex;
        flex-direction: column;
        padding: 0 14px 6px 14px;
        li.listItem {
          display: flex;
          align-items: center;
          height: 32px;
          h3 {
            width: 54%;
            font-size: 16px;
          }
          p {
            min-width: 80px;
            white-space:nowrap;
            font-size: 16px;
            color: #00adff;
          }
        }
      }
      .more {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 40px 12px 40px;
        .ant-btn {
          width: 100%;
        }
      }
    }
  }
</style>
